﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="stwh_Web.Plugin.plupload_2.demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../jquery-1.11.1.js" type="text/javascript"></script>
    <script src="js/plupload.full.min.js" type="text/javascript"></script>
    <script src="../stwhCommon.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <h3>
            上传图片预览：</h3>
        <div id="ylImage">
        </div>
        <input type="text" id="txtimg" value="" />
        <button id="uploadImage">
            浏览</button>
        <button id="startupload" disabled="disabled">
            上传</button>
        <div style="width: 100%; height: 10px; overflow: hidden; border: 1px solid #000;">
            <div id="process" style="width: 0px; height: 10px; overflow: hidden; background: #a1a1a1;">
            </div>
        </div>
        <br />
    </div>
    <script type="text/javascript">
        $(function () {
            //实例化一个plupload上传对象
            var uploader = new plupload.Uploader({
                browse_button: 'uploadImage', //触发文件选择对话框的按钮，为那个元素id
                url: '/handler/uploadhandler.ashx', //服务器端的上传页面地址
                filters: {
                    mime_types: [ //只允许上传图片和zip文件
                        {title: "Image files", extensions: "jpg,gif,png,avi" }
                    ],
                    max_file_size: '100MB' //最大只能上传400kb的文件
                    //,
                    //prevent_duplicates : true //不允许选取重复文件
                }, //限制上传文件的类型，大小
                multi_selection: true, //是否可以在文件浏览对话框中选择多个文件，true为可以，false为不可以。
                flash_swf_url: '/Plugin/plupload-2.1.3/js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
                silverlight_xap_url: '/Plugin/plupload-2.1.3/js/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
            });

            uploader.bind('FilesAdded', function (uploader, files) {
                $("#startupload").removeAttr("disabled");
                console.log("文件名称：" + files[0].name + "\t\t文件类型：" + files[0].type + "\n");
            });
            uploader.bind('FileUploaded', function (uploader, file, responseObject) {
                console.log("服务器返回文本：" + responseObject.response + "\n服务器返回头信息：" + responseObject.responseHeaders + "\n状态码：" + responseObject.status);
                $("#txtimg").val(responseObject.response);
            });
            uploader.bind('UploadComplete', function (uploader, files) {
                console.log("已上传" + files.length + "个文件");
                $("#startupload").attr({ "disabled": "disabled" }).text("上传");
            });
            uploader.bind('Error', function (uploader, errObject) {
                console.log("服务器错误，信息为：" + errObject.message + "\n错误代码：" + errObject.code);
                $("#startupload").attr({ "disabled": "disabled" }).text("上传"); ;
            });
            uploader.bind('UploadProgress', function (uploader, file) {
                $("#process").width(file.percent + "%");
            });

            //在实例对象上调用init()方法进行初始化
            uploader.init();

            $("#startupload").click(function () {
                var txt = $(this).text();
                if (txt.Trim() == "上传") {
                    $(this).text("取消");
                    uploader.start();
                }
                else if (txt.Trim() == "取消") {
                    $(this).attr({ "disabled": "disabled" }).text("上传");
                    $("#process").width("0%");
                    uploader.stop();
                    for (var i = 0; i < uploader.files.length; i++) {
                        uploader.removeFile(uploader.files[i]);
                    }
                }
            });
        });
    </script>
</body>
</html>
